<template>
    <div class="dialog" v-if="form">
        <div class="title">业务系统基本信息</div>
        <div class="wrap1" v-if="form.cloudUp">
            <div>
                <div>系统名称:</div>
                {{ form.cloudUp.projectname }}
            </div>
            <div>
                <div>云服务商:</div>{{form.cloudUp.supplierName}}
            </div>
            <div>
                <div>上线时间:</div>
                {{ form.cloudUp.onlinetime }}
            </div>
            <div>
                <div>上云区域:</div>
                {{ translatecloudUpArea(form.cloudUp.cloudUpArea) }}
            </div>
            <div>
                <div>业务部门:</div>
                {{ form.cloudUp.officeName }}
            </div>
            <div>
                <div>业主方联系人:</div>
                {{ form.cloudUp.contactsNickName }}
            </div>
            <div>
                <div>联系电话:</div>
                {{ form.cloudUp.contactsinfo }}
            </div>
            <div>
                <div>邮箱:</div>
                {{ form.cloudUp.email }}
            </div>
            <div>
                <div>承建单位:</div>
                {{ form.cloudUp.constunit }}
            </div>
            <div>
                <div>承建方联系人:</div>
                {{ form.cloudUp.constcts }}
            </div>
            <div>
                <div>联系电话:</div>
                {{ form.cloudUp.constctsinfo }}
            </div>
            <div>
                <div>邮籍:</div>
                {{ form.cloudUp.constemail }}
            </div>
            <!-- <div style="width: 100%">
                <div style="width: auto">系统建设（运维）资金来源:</div>
                {{ form.cloudUp.fundFrom }}
            </div> -->
            <div style="width: 100%">
                <div style="width: auto">自行落实部门上云经费:</div>
                {{ form.cloudUp.fundBySelf ? "是" : "否" }}
            </div>
            <div style="width: 100%">
                <div>项目简介:</div>
                {{ form.cloudUp.introduction }}
            </div>
            <div style="width: 100%">
                <div>申请理由:</div>
                {{ form.cloudUp.remarks }}
            </div>
        </div>
        <div class="title">申请资源</div>
        <div style="width: 100%">
            <label style="margin-right: 10px">服务商:</label>
            <span>{{ form.cloudSupplier_label }}</span>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>服务器</div>
            </div>
            <div style="padding: 20px 20px; width: 100%;max-height: 500px;overflow-y: scroll;">
                <el-table
                    :data="form.hosts"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="资源类型">
                        <template slot-scope="scope">
                            {{
                                scope.row.flavorType == 1
                                    ? "云服务器"
                                    : scope.row.flavorType == 2
                                    ? "高性能服务器"
                                    : scope.row.serverCode
                                    ? "数据库"
                                    : "存储产品"
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="实例名称">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flavorType">{{
                                scope.row.hostName
                            }}</span>
                            <span v-else-if="scope.row.serverCode">{{
                                scope.row.hostInstanceName
                            }}</span>
                            <span
                                v-else-if="!scope.row.hostInstanceNames.length"
                            ></span>
                            <div
                                v-else
                                style="margin-bottom: 6px"
                                v-for="(item, index) in scope.row
                                    .hostInstanceNames"
                                :key="index"
                            >
                                {{ item }}
                            </div>
                        </template>
                    </el-table-column>
                   <el-table-column label="可用域">
                       <template slot-scope="scope">
                           {{scope.row.availableDomain_label}}
                       </template>
                   </el-table-column>
                   <el-table-column label="规格分类 / 资源类型">
                       <template slot-scope="scope">
                          {{scope.row.cloudFlavorCode_label}}
                       </template>
                   </el-table-column>
                   <el-table-column label="规格">
                       <template slot-scope="scope">
                          <div v-if="scope.row.flavorType == 1">{{scope.row.cpuNumber}}vCPU； {{scope.row.memorySize}}G内存</div>
                          <div v-if="scope.row.flavorType == 2">{{scope.row.cloudFlavorCode_desc}}</div>
                       </template>
                   </el-table-column>
                    <el-table-column label="操作系统">
                       <template slot-scope="scope">
                          <div>{{ scope.row.osName || osName(scope.row.osServerCode[0] || scope.row.osServerCode)}}</div>
                       </template>
                   </el-table-column>
                   <el-table-column label="数据盘" width="300">
                   <template slot-scope="scope" v-if="scope.row.flavorType == 1">
                       <div
                       v-if="scope.row.flavorType"
                       placement="top-start"
                       width="500"
                       trigger="hover">
                           <div v-if="scope.row.flavorType==1">
                               <div style="margin-bottom: 6px;"><label>
                                   (共<span style="color: #E83112;">{{scope.row.disks.length}}</span>块){{scope.row.disks.length?':':''}}</label>
                               </div>
                               <div style="margin:0 0 6px 16px;" v-for="(item,index) in scope.row.disks" :key="index">
                                   <span>{{item.diskServerCode_label||item.diskServerName}}</span>，{{item.dataDiskSize}}GB
                               </div>
                           </div>
                       </div>
                   </template>
                   </el-table-column>
                    <el-table-column v-if="priceFlag" width="650">
                      <template slot="header" slot-scope="scope">
                          <div style="text-align: center">费用</div>
                          <div class="tab_wrap">
                              <div>名称</div>
                              <div>单价</div>
                              <div>用量</div>
                              <div>总价（天）</div>
                          </div>
                      </template>
                      <template slot-scope="scope">
                          <div
                              class="tab_wrap"
                              v-for="(item, index) in scope.row.meterageList || [
                                  scope.row.meterage,
                              ]"
                              :key="index"
                          >
                              <div>{{ item.resourceName }}</div>
                              <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                              <div>
                                  {{ item.resourcePrice }}{{ item.resourcePriceUnit }}
                              </div>
                              <div>¥{{ item.resourcePriceTotalStr }}</div>
                          </div>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>数据库</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    :data="form.databases"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.serverCode_label }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="版本">
                        <!-- <template slot-scope="scope">
                            <span>{{ scope.row.databaseVersion }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column label="位数">
                        <template slot-scope="scope">
                            <span>{{ scope.row.systemDigits }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="priceFlag" width="650">
                      <template slot="header" slot-scope="scope">
                          <div style="text-align: center">费用</div>
                          <div class="tab_wrap">
                              <div>名称</div>
                              <div>单价</div>
                              <div>用量</div>
                              <div>总价（天）</div>
                          </div>
                      </template>
                      <template slot-scope="scope">
                          <div
                              class="tab_wrap"
                              v-for="(item, index) in scope.row.meterageList || [
                                  scope.row.meterage,
                              ]"
                              :key="index"
                          >
                              <div>{{ item.resourceName }}</div>
                              <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                              <div>
                                  {{ item.resourcePrice }}{{ item.resourcePriceUnit }}
                              </div>
                              <div>¥{{ item.resourcePriceTotalStr }}</div>
                          </div>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>存储产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    :data="form.storeProducts"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="磁盘类型">
                        <template slot-scope="scope">
                            {{ scope.row.diskServerCode_label }}
                        </template>
                    </el-table-column>
                    <el-table-column label="磁盘用量">
                        <template slot-scope="scope">
                            <span> {{ scope.row.dataDiskSize }}GB </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="存储类型">
                        <template slot-scope="scope">
                            <span> {{ scope.row.productCode }}</span>
                        </template>
                    </el-table-column>
                     <el-table-column label="服务类型">
                        <template slot-scope="scope">
                            <span> {{ scope.row.diskCode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="priceFlag" width="650">
                      <template slot="header" slot-scope="scope">
                          <div style="text-align: center">费用</div>
                          <div class="tab_wrap">
                              <div>名称</div>
                              <div>单价</div>
                              <div>用量</div>
                              <div>总价（天）</div>
                          </div>
                      </template>
                      <template slot-scope="scope">
                          <div
                              class="tab_wrap"
                              v-for="(item, index) in scope.row.meterageList || [
                                  scope.row.meterage,
                              ]"
                              :key="index"
                          >
                              <div>{{ item.resourceName }}</div>
                              <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                              <div>
                                  {{ item.resourcePrice }}{{ item.resourcePriceUnit }}
                              </div>
                              <div>¥{{ item.resourcePriceTotalStr }}</div>
                          </div>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div
            v-if="priceFlag"
            style="
                margin-top: 10px;
                text-align: right;
                color: rgb(167, 167, 167);
            "
        >
            预估费用：<span style="color: rgb(255, 173, 77); font-size: 24px"
                >¥{{ parseInt(form.dailyPriceTotal) }}</span
            >/天
            <span
                style="
                    margin-left: 20px;
                    color: rgb(255, 173, 77);
                    font-size: 24px;
                "
                >¥{{parseInt(form.yearPriceTotal) }}</span
            >/年
        </div>
        <div class="title" style="margin-top: 30px">安全产品</div>
        <div class="wrap1">
            <div style="width: 100%">
                <span
                    v-for="(item, index) in form.safeProducts"
                    :key="index"
                    style="margin-left: 20px"
                    >{{ item.productName }}</span
                >
            </div>
        </div>
        <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
        <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
            <div style="display: flex">
                <span style="font-weight: bold; margin-right: 10px">说明:</span
                >{{ form.remark }}
            </div>
            <div style="font-weight: bold">文件:</div>
            <div style="display: flex; flex-wrap: wrap">
                <el-table
                    :data="form.files"
                    style="margin-left:20px;width: 50vw">
                    <el-table-column
                        label="文件名称"
                        >
                        <template slot-scope="scope">
                            {{scope.row.name.substring( 0 ,scope.row.name.lastIndexOf("."))}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="文件类型"
                        >
                        <template slot-scope="scope">
                            {{scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1,scope.row.name.length)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="100"
                            class-name="small-padding fixed-width"
                            v-if="false"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-view"
                                    @click="previewFile(scope.row)"
                                    >预览
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="DeleteFile(scope.row,scope.$index)"
                                    >删除
                                </el-button>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getDicts
  } from "@/api/system/dict/data";
export default {
    name: "detail",
    components: {},
    props: {
        // configure: {
        //     type: Object,
        //     default: {
        //         available_domain: [], //可用域
        //         cloud_service_provider: [], //服务商
        //         storage_type: [], //系统盘类型
        //         codeList: [], //云服务器规格列表
        //         czxtList: [], //操作系统列表
        //         ccList: [], //数据盘类型
        //         fwcpList: [], //服务型磁盘类型
        //         wlfwqList: [], //高性能服务器资源类型
        //         sjkList: [], //数据库类型
        //         yyaqList: [], //安全产品
        //     },
        // },
        form: {
            type: Object,
            default: null,
        },
        otherFlag: {
            type: Boolean,
            default: true,
        },
        priceFlag: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            base_url: process.env.VUE_APP_BASE_API,
            dialogImageUrl: "",
            dialogVisible: false,
            cloud_up_areaList:[],
            configure:JSON.parse(sessionStorage.getItem('configure'))
        };
    },
    created() {
        getDicts("cloud_up_area").then((response) => {
          this.cloud_up_areaList = response.data;
      });
    },
    methods: {
        translatecloudUpArea(data){
            var Name = ''
            this.cloud_up_areaList.forEach(item=>{
                if(item.dictValue == data){
                    Name = item.dictLabel
                }
            })
            return Name
        },
      osName(code){
          let serviceName
          this.configure.czxtList.forEach(item=>{
              if(item.code == code){
                  serviceName = item.serviceName
              }
          })
          return serviceName
      },
        previewFile(item){
           if(item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'gif' ||
              item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'jpeg' ||
              item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'jpg' ||
              item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'png'){
                   this.dialogImageUrl = item.url;
                   this.dialogVisible = true;
                   return
           }else{
               this.$message.error(`仅限后缀名为 gif、jpeg、jpg、 png可预览`);
           }
        },
        DeleteFile(data,index){
        },
      //显示弹窗
      showAdd(num, data, index) {
        this.index = index
        this.addShow = num
        setTimeout(() => {
          this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)))
        }, 200)
      },
        //文件预览
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    padding-right: 20px;
    font-size: 12px;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .wrap {
      display: flex;
      background: #faf9ff;
      margin-top: 20px;
      border-radius: 10px;

      .wrap_title {
        padding: 0 10px;
        background: #f4f4f4;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        div {
          height: 100%;
          width: 14px;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .wrap_item {
        display: flex;
        margin-top: 20px;

        div:first-child {
          width: 90px;
          font-weight: bold;
        }

        i {
          line-height: 28px;
          margin-right: 10px;
          font-size: 20px;
          color: #E83112;
        }
      }
    }
    .wrap1 {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        padding-left: 20px;
        overflow-x: hidden;
        min-width:1380px;
        // justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
            width:25%;
            // margin-left: 20px;
            min-width: 340px;
            display: flex;
            border-bottom: 1px solid rgba(192,196,204,0.5);
            padding-bottom:10px;
            div {
                width: 100px;
                min-width: 100px;
                font-weight: bold;
                margin: 0;
                display: flex;
                padding-right: 10px;
                // justify-content: flex-end;
                color: #606266;
                border-bottom: 0px solid rgba(192,196,204,0.5);
            }
        }
    }
    .wrap2 {
        padding: 0 20px 20px 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
        }
    }
    .wrap3 {
        padding: 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
    }
    .tab_wrap {
        display: flex;
        justify-content: space-between;
        div {
            width: 25%;
            padding: 10px 0;
        }
        div:first-child {
            font-weight: bold;
        }
    }
}
</style>
